﻿/*样式表优先级：内联 > 内部 > 外部，id > 类 > 标签名
格式：
选择器 {
    属性1: 属性值1;
    属性2: 属性值2;
}
选择器：元素/类/ID/通用/子元素/后代（包含）/兄弟（并集）/伪类/伪元素选择器
*/
/*元素选择器*/
h3 {
    color: springgreen;
}
/*类选择器*/
.nav {
    background-color: yellow;
}
/*ID选择器*/
#css_id {
    color: darkorange;
    font: bolder 48px STSong; /*复合属性，也可写成font:font-weight=bolder font-size=48px font-family=STSong;*/
}
/*通用选择器，选择所有元素*/
* {
    font-family: KaiTi;
}
/*子元素选择器，选择位于父元素内部的子元素，不包括孙元素*/
.content > #css_son {
    color: lightpink;
}
/*后代（包含）选择器，选择位于父元素内部的子元素内的孙元素，包括子元素*/
.content p {
    color: deeppink;
    font-weight: bolder;
}
/*兄弟（并集）选择器，选择其后相邻元素*/
#css_son + p + p { /*后两个p*/
    background-color: lemonchiffon;
}
/*伪类选择器，选择元素特定状态或位置，用于用户交互等的元素应用样式*/
/*
    选择第1个子元素：first-child
    选择第n个子元素：nth-child()
    链接状态：active
*/
#css_son:hover { /*鼠标悬停*/
    background-color: lemonchiffon;
}
/*伪元素选择器，创建虚拟元素并样式化*/
/*
    ::before    选中元素之前插入虚拟内容
    ::after     选中元素之后插入虚拟内容
*/

/*网页布局方式*/
/*标准流/普通流/文档流:网页按照元素书写的顺序依次排列，块和行内元素按默认规定方式排列*/
/*    浮动:元素脱离文档流，根据开发者的意愿漂浮到网页的任意方向
    三大特性：脱标（脱离标准流），一行显示顶行对齐，具备行内块元素的特性（不论原属性是什么）
    选择器{
        float:left/right/none       创建浮动框，将其移动到一边，直到左或右边缘触及包含块或另一个浮动框的边缘，可令块排列在同一行（过多会另起行），与行内块的区别是中间没有缝隙（注：相对父元素浮动，只会在父元素内部）
    }
*/
.father {
    background-color: yellow;
    height: 300px; /*如果不设置高度，父元素会坍塌，边框和后续标签都会被浮动标签盖住，并且边框只有顶部留下，此时清除浮动有两种方法*/
    border: 5px solid lightpink;
    margin-bottom: 100px;
    /*overflow:hidden;*/ /*法1，此时父元素高度和子元素一致*/
}
/*法2，伪元素清除法，效果同上*/
/*.father::after {
        content: "";
        display: table;
        clear: both;
    }*/

.left-son {
    background-color: aqua;
    height: 100px;
    width: 100px;
    float: left;
}

.right-son {
    background-color: lime;
    height: 100px;
    width: 100px;
    float: right;
}
/*定位：可以精准定位，但缺乏灵活性*/
.normal-pos {
    background-color: chocolate;
    height: 100px;
    width: 100px;
}
/*相对定位：相对元素在文档流的正常位置定位，不会脱离文档流*/
.relative-pos {
    background-color: coral;
    height: 100px;
    width: 100px;
    position: relative;
    left: 50px; /*距最左偏移多少，即反向移动*/
    right:; /*与left只生效一个*/
    top:;
    bottom: 50px; /*与top只生效一个*/
}
/*绝对定位：相对与其最近的已定位的父元素的位置定位，不占据文件流*/
.absolute-pos {
    background-color: darkorange;
    height: 100px;
    width: 100px;
    position: absolute;
    left: 0px; /*若无已定位父元素则相对于html标签定位，相当于坐标，右x下y，同上反向，不写则为文档流位置*/
    top:;
}
/*固定定位：相对浏览器窗口定位，不占据文件流，固定在浏览器窗口某个位置，不随滚动而移动*/
.fixed-pos {
    background-color: orange;
    height: 100px;
    width: 100px;
    position: fixed;
    left: 0px;
    bottom: 100px;
}
/*    ‘flexbox’和‘grid’（自适应布局）*/
